/*
  学习目标：复用逻辑-hoc - 高阶组件
  步骤：
     1. 是一个函数
     2. 💥 函数的内部, 封装了一个组件. 组件内封装逻辑
     3. 函数的参数, 接收一个组件, 作为内部组件的子组件
     4. 内部组件, 通过父传子, 给接收的组件, 传递逻辑
     5. 返回内部封装的组件
*/

import React, { useState } from 'react';

// 1. 本质是一个函数
export function logMouse(Component) {
  // 2. 💥 函数的内部, 封装了一个组件. 组件内封装逻辑
  // 5. 返回内部封装的组件
  return function Mouse() {
    const [mouse, setMouse] = useState({ x: 0, y: 0 });
    const handleMouseMove = (e) => {
      setMouse({ x: e.clientX, y: e.clientY });
    };
    // 3. 函数的参数, 接收一个组件, 作为内部组件的子组件
    return (
      <Component
        // 4. 内部组件, 通过父传子, 给接收的组件, 传递逻辑
        mouse={mouse}
        handleMouseMove={handleMouseMove}
      />
    );
  };
}

const MyMain = logMouse(Main);
const MyFooter = logMouse(Footer);
const MyHeader = logMouse(Header);

export default function App() {
  return (
    <div>
      <MyHeader />
      <MyMain />
      <MyFooter />
    </div>
  );
}

function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}

function Main({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      我是
      <h1>
        Main- x:{mouse.x} -y:{mouse.y}
      </h1>
    </div>
  );
}

function Footer({ mouse, handleMouseMove }) {
  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x:{mouse.x} -y:{mouse.y}
    </h1>
  );
}
